import React, { useContext, useState } from 'react';
import { Alert, View, ScrollView, StatusBar } from 'react-native';
import { Button, Divider, Icon, Input, Text } from 'react-native-elements';

import CryptoJS from 'crypto-js';

import LocaleContext from '../libs/locale';
import WalletContext, { checkPassword } from '../libs/wallet';
import { keyPairFromSeed, toAddress } from '../libs/keyPair';

const ModifyPassword = ({ navigation, setWallet }: any) => {
  const locale = useContext(LocaleContext);
  const wallet: any = useContext(WalletContext);

  const [pwd, setPwd] = useState('');
  const [pwd2, setPwd2] = useState('');
  const [pwd3, setPwd3] = useState('');
  const [pwdVisible, setPwdVisible] = useState(false);
  const [pwdVisible2, setPwdVisible2] = useState(false);
  const [pwdVisible3, setPwdVisible3] = useState(false);


  const onSave = async () => {
    if (!checkPassword(wallet, pwd)) {
      Alert.alert('', locale?._('My.security.modifyPassword.oldError'));
      return;
    }

    // if (pwd2.length < 6 || pwd2.length > 12) {
    //   Alert.alert('', locale?._('My.security.modifyPassword.newError'));
    //   return;
    // }
    if (pwd2 !== pwd3) {
      Alert.alert('', locale?._('My.security.modifyPassword.newErrorNotMatch'));
      return;
    }

    const encrypted = CryptoJS.AES.encrypt(wallet.seed, pwd2).toString();

    setWallet({
      encrypted,
      seed: wallet.seed,
      address: wallet.address,
      memo: wallet.memo,
      exported: wallet.exported,
    });

    Alert.alert('', locale?._('My.security.modifyPassword.success'));
    navigation.pop();
  };

  return (
    <ScrollView>
      <View style={{
        paddingLeft: 16,
        paddingRight: 16,
        marginTop: 60,
        marginBottom: 20,
      }}>
        <Input
          placeholder={locale?._('My.security.modifyPassword.old')}
          rightIcon={<Icon
            name={pwdVisible ? 'eye' : 'eye-off'}
            type='feather'
            onPress={() => setPwdVisible(!pwdVisible)}
          />}
          secureTextEntry={!pwdVisible}
          onChangeText={value => setPwd(value)}
        />
        <Input
          placeholder={locale?._('My.security.modifyPassword.new')}
          rightIcon={<Icon
            name={pwdVisible2 ? 'eye' : 'eye-off'}
            type='feather'
            onPress={() => setPwdVisible2(!pwdVisible2)}
          />}
          secureTextEntry={!pwdVisible2}
          onChangeText={value => setPwd2(value)}
        />
        <Input
          placeholder={locale?._('My.security.modifyPassword.new2')}
          rightIcon={<Icon
            name={pwdVisible3 ? 'eye' : 'eye-off'}
            type='feather'
            onPress={() => setPwdVisible3(!pwdVisible3)}
          />}
          secureTextEntry={!pwdVisible3}
          onChangeText={value => setPwd3(value)}
        />
      </View>
      <View style={{
        display: 'flex',
        alignItems: 'center',
      }}>
        <Button
          title={locale?._('ok')}
          onPress={onSave}
          buttonStyle={{ backgroundColor: '#7460E3FF' }}
        />
      </View>
    </ScrollView>
  );
};

export default ModifyPassword;
